<template>
    <BaseContent class="bookdynamic">
        <div class="row">
            <div class="col-4 submit_card">
                <div class="card card_input">
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="exampleFormControlTextarea1" class="form-label">快来发一条动态吧</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="请输入动态内容" v-model="dynamic_content"></textarea>
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入内容标题" v-model="dynamic_title">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入头像地址" v-model="dynamic_photo">
                            <!-- <input type="file" id="photoInput" accept="image/*" @change="select_a_photo"> -->
                            <!-- <img :src="Examination_photo.photo_test" alt=""> -->
                            <!-- <card-body v-for="Examination in Examination_photo" :key="Examination.id">
                                <img :src="Examination.photo_test" alt="">
                            </card-body> -->
                        </div>
                        <div class="dynamic_error">{{ dynamic_error }}</div>
                        <button type="button" class="btn btn-success" @click="submit_dynamic">发表</button>
                    </div>
                </div>
            </div>
            <div class="col-8 card-dynamic-info card-list-scrollable" style="max-height: 630px;">
                <div class="card card-single" style="width: 97%;" v-for="dynamic in dynamics.dynamics" :key="dynamic.id">
                    <div class="card-body">
                        <div class="user_infomation">
                            <span><img :src="dynamic.user_photo" alt="" class="user_photo" @click="to_contact(dynamic.user_id)"></span>
                            <span class="user_nickname">{{ dynamic.user_nickname }}</span>
                            <span class="submit_time">{{ dynamic.submittime }}</span>
                        </div>
                        <p class="card-text">{{ dynamic.content }}</p>
                        <span class="dynamic_title">——{{ dynamic.title }}</span>
                        <img :src="dynamic.photo" class="card-img-top" alt="...">
                    </div>
                </div>
            </div>
        </div>
    </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import { reactive, ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name: "BookFriendView",
    components: {
        BaseContent
    },
    setup() {
        const dynamic_content = ref('');
        const dynamic_title = ref('');
        const dynamic_photo = ref('');
        const dynamics = reactive({});
        const users = reactive([]);
        const store = useStore();
        const router = useRouter();
        const dynamic_error = ref('');

        // const Examination_photo = ref([]);
        $.ajax({
            url: "http://47.121.28.202:8000/settings/dynamic/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                dynamics.count = resp.length;
                dynamics.dynamics = resp;
            }
        })

        // $.ajax({
        //     url: "http://47.121.28.202:8000/settings/photo_test/",
        //     type: "GET",
        //     success(resp) {
        //         for (let i of resp) {
        //             if (i.photo_test !== null) {
        //                 Examination_photo.value.push(i);
        //             }
        //         }
        //         console.log(Examination_photo.value);
        //     }
        // })

        const submit_dynamic = () => {
            dynamic_error.value = "";
            $.ajax({
                url: "http://47.121.28.202:8000/settings/dynamic/",
                type: "POST",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    user_id: store.state.user.id,
                    user_photo: store.state.user.photo,
                    photo: dynamic_photo.value,
                    content: dynamic_content.value,
                    title: dynamic_title.value,
                    user_nickname: store.state.user.nickname,
                    submittime: new Date().toLocaleString(),
                },
                success(resp) {
                    if(resp.result === "success") {
                        dynamics.dynamics.unshift({
                            user_id: store.state.user.id,
                            user_photo: store.state.user.photo,
                            photo: dynamic_photo.value,
                            content: dynamic_content.value,
                            title: dynamic_title.value,
                            user_nickname: store.state.user.nickname,
                            submittime: new Date().toLocaleString(),
                        })
                        dynamic_photo.value = "";
                        dynamic_title.value = "";
                        dynamic_content.value = "";
                    }
                    else {
                        dynamic_error.value = resp.result;
                    }
                }
            })
        }

        const to_contact = (userid) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'ordinarydialogue',
                    params: {
                        userid
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        // const select_a_photo = (event) => {  
        //     const file = event.target.files[0]; // 获取所选的第一个文件  
        //     if (file) {  
        //         dynamic_photo.value = file; // 更新 dynamic_photo 为文件对象  
        //         dynamic_title.value = file.name; // 更新动态标题为文件名  
        //     } else {  
        //         dynamic_photo.value = ''; // 如果没有文件，清空动态照片  
        //         dynamic_title.value = ''; // 清空标题  
        //     }  
        // }; 

        return {
            dynamic_content,
            dynamic_title,
            dynamic_photo,
            dynamics,
            submit_dynamic,
            dynamic_error,
            users,
            to_contact,
            // Examination_photo,
        }
    }
}
</script>

<style scoped>
.form-label {
    font-weight: bold;
}
.btn-success {
    width: 100%;
}
.card-img-top {
    width: 100%;
    height: 450px;
    border-radius: 5px;
}
.card-single {
    margin-bottom: 10px;
}
.user_photo {
    width: 37px;
    margin-right: 10px;
    cursor: pointer;
}
.user_infomation {
    margin-bottom: 10px;
}
.user_nickname {
    font-weight: bold;
}
.dynamic_error {
    color: red;
}
.submit_time {
    float: right;
}
.dynamic_title {
    float: right;
    margin-bottom: 10px;
}
.bookdynamic {
    user-select: none;
}
.card-list-scrollable {
    overflow-y: auto;
    border-radius: 5px;
}
</style>